<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        *{
            padding: 0;
            margin: 0;
        }
        .absolute{
            position: absolute;
        }
        .box{
            width: 790px;
            height: 535px;
            margin: 0 auto;
            background: url("timg.png") no-repeat center;
            background-size: cover;
            position: relative;
        }
        .shangwu{
            /*background-color: #5bd6e5;*/
            width: 100px;
            height: 100px;
            left: 180px;
            top: 200px;
        }
        .shijian{
            /*background-color: #00b260;*/
            width: 200px;
            height: 100px;
            left: 280px;
            top: 200px;
        }
        .xingqi{
            /*background-color: yellow;*/
            width: 100px;
            height: 100px;
            left: 480px;
            top: 200px;
        }
        .riqi{
            /*background-color: #00c0a5;*/
            width: 400px;
            height: 80px;
            left: 180px;
            top: 300px;
        }
        p{
            text-align: center;
            line-height: 100px;
            font-size: 25px;
        }

    </style>
</head>
<body>

<div class="box">
    <div class="shangwu absolute">
        <p></p>
    </div>
    <div class="shijian absolute">
        <p></p>
    </div>
    <div class="xingqi absolute">
        <p></p>
    </div>
    <div class="riqi absolute">
        <p></p>
    </div>
</div>

<script>

    var shangwu = document.querySelector(".shangwu p");
    var shijian = document.querySelector(".shijian p");
    var xingqi = document.querySelector(".xingqi p");
    var riqi = document.querySelector(".riqi p");
    var xingqilist = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
    function doubleNum(num) {
        num = num<10?"0"+num:num;
        return num;
    }
    setInterval(function () {
        var date = new Date();
        shangwu.innerText = date.getHours()<12?"上午":"下午";
        shijian.innerText = doubleNum(date.getHours())+"："+doubleNum(date.getMinutes());
        xingqi.innerText = xingqilist[date.getDay()];
        riqi.innerText = date.getFullYear()+"年"+(date.getMonth()+1)+"月"+date.getDate()+"日";
    },500)

</script>

</body>
</html>